<template>
  <div class="content">
    <div class="area_box">
      <!-- <div class="cat_back el-icon-arrow-left" @click="goBlack">返回</div> -->
      <div class="cat_hd">订单号：{{order?order.orderSn:''}}</div>
      <div class="cat_bd">
        <div class="subfield mt20">
          <div class="pay-l">余额支付</div>
          <div class="pay-r">
            支付：<span>{{order?order.orderPrice:''}}</span>
          </div>
        </div>
        <div class="cat-bd-con">
          <el-table ref="multipleTable" :data="orderItemOk" style="width: 100%">
            <el-table-column prop="name" width="350" label="物品类型">
              <template slot-scope="scope">
                {{ scope.row.currencyType?gameType(scope.row.currencyType):scope.row.stdItemDetails.name}}
              </template>
            </el-table-column>
            <el-table-column prop="humanName" label="出售人">
            </el-table-column>
            <el-table-column prop="serverName" label="所在区服">
            </el-table-column>
            <el-table-column prop="currencyPrice" label="售价">
              <template slot-scope="scope">
                <b style="color:#d82141">{{ scope.row.currencyPrice || scope.row.itemPrice}}</b>
              </template>
            </el-table-column>
            <!-- <el-table-column width="120" align="center">
            <template slot-scope="scope">
              <span :style="{'color':'#d82141'}">{{scope.row.isBuyState?"不可购买":"可购买"}}</span>
            </template>
          </el-table-column> -->
          </el-table>

        </div>
        <div class="cat-bd-con">
          <!-- <div class="con-t-span">余额支付:</div>
          <div class="con-t-select"></div> -->

          <el-radio-group v-model="radio" class="con-t-select-radio">
            <el-radio :label="1">
              余额剩余：（￥{{myInfo.transactionPrice}}）
            </el-radio>
            <!-- <el-radio :label="6"><img class="con-t-watpay" src="../../assets/static/t-07.png" />微信</el-radio> -->
          </el-radio-group>

        </div>

      </div>

      <div class="cat-bd" v-if="orderItemFalse.length>0">
        <p style="color:#909399;color: #da2740;font-weight: bold;">共{{orderItemFalse.length}}条不可购买</p>
        <el-table ref="multipleTable" :data="orderItemFalse" :row-style="{'color':'#909399'}" style="width: 100%">
          <el-table-column prop="name" width="350" label="货币类型">
            <template slot-scope="scope">
              {{ scope.row.currencyType?gameType(scope.row.currencyType):scope.row.stdItemDetails.name}}
            </template>
          </el-table-column>
          <el-table-column prop="humanName" label="出售人">
            <template slot-scope="scope">
              {{isAnony?'***': scope.row.humanName}}
            </template>
          </el-table-column>
          <el-table-column prop="serverName" label="所在区服">
          </el-table-column>
          <el-table-column prop="currencyPrice" label="售价">
            <template slot-scope="scope">
              <b style="color:#d82141">{{ scope.row.currencyPrice || scope.row.itemPrice}}</b>
            </template>
          </el-table-column>
          <!-- <el-table-column width="120" align="center">
            <template slot-scope="scope">
              <span :style="{'color':'#d82141'}">{{scope.row.isBuyState?"不可购买":"可购买"}}</span>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="littleShowbut" style="width:450px">
        <el-button @click="goBuy" :loading="loading01" class="goBuy" type="danger">立即支付</el-button>
        <el-button @click="cancelOrde" :loading="loading02" class="but2" style="height: 50px; width: 180px;    margin-top: 20px;" type="danger">取消订单</el-button>
      </div>

    </div>
    <!---余额不足提示---->
    <el-dialog width="400px" :close-on-click-modal="false" title="提示" :visible.sync="littleShow">
      <div style="text-align: center;">
        <h2 style="color: #333; font-size: 16px;">购买余额不足</h2>
        <p style="padding-top: 30px;font-size: 18px;">（当前剩余{{myInfo.transactionPrice}}）</p>
        <!-- <p style="padding-top: 20px;"><el-radio v-model="radio" label="2">3000 余额 （当前剩余0.00）</el-radio></p> -->
        <div class="littleShowbut">
          <div class="but1">
            <router-link tag="a" target="_blank" :to="{path:'./my'}">充 值</router-link>
          </div>
          <div class="but2" @click="close">取 消</div>
        </div>
      </div>
    </el-dialog>

    <!---支付状态提示---->
    <el-dialog width="400px" :close-on-click-modal="false" :show-close="false" :visible.sync="ISpayShow">
      <h2 style="color: #333;text-align: center;    line-height: 40px;">
        <span style="color:#DA2740;font-size:40px;vertical-align: top;" class="el-icon-success" v-if="payOrderOk.orderStatus==201"></span>
        <span style="color:#DA2740;font-size:40px;vertical-align: top;" class="el-icon-error" v-else></span>

        订单支付成功
      </h2>
      <div class="particulars">
        <div class="particulars-item">
          <b>订单号</b>
          <span>{{payOrderOk.orderSn}}</span>
        </div>
        <div class="particulars-item">
          <b>支付方式</b>
          <span>余额支付</span>
        </div>
        <div class="particulars-item">
          <b>订单金额</b>
          <span>￥{{payOrderOk.orderPrice}}</span>
        </div>
        <div class="particulars-item">
          <b>时间</b>
          <span>{{payOrderOk.updateTime}}</span>
        </div>
      </div>
      <div class="littleShowbut">
        <div class="but1" @click="goMy">查看订单</div>
        <div class="but2" @click="goHome">返回店铺</div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import api from '../../api/game'
export default {
  data () {
    return {
      isAnony: false,
      payOrderOk: '',
      littleShow: false,
      ISpayShow: false,
      loading01: false,
      loading02: false,
      radio: 1,
      myInfo: '',
      order: [],
      orderItemFalse: [],
      orderItemOk: [],
      currency: []
    }
  },
  mounted () {
    this.order = JSON.parse(sessionStorage.getItem('order'))
    if (!this.order) {
      this.$router.replace({ path: './' })
      return
    }
    this.orderItemFalse = JSON.parse(sessionStorage.getItem('orderItemFalse'))
    this.orderItemOk = JSON.parse(sessionStorage.getItem('orderItemOk'))
    this.currency = JSON.parse(localStorage.getItem('currency'))
    this.isAnony = JSON.parse(localStorage.getItem('isAnony'))
    this.getInfo()
  },
  methods: {
    gameType (e) {
      for (var i = 0; i < this.currency.length; i++) {
        if (e == this.currency[i].id) {
          return this.currency[i].value
        }
      }
    },
    getInfo () {
      this.$apis.getInfo().then(res => {
        this.myInfo = res.data.data
      })
    },
    goBuy () {
      if (this.orderItemOk.length <= 0) {
        this.$message.error('当前订单没有商品可购买')
        return
      }
      this.loading01 = true
      api.FinishOrder({ orderSn: this.order.orderSn }).then(res => {
        this.loading01 = false
        if (res.data.errno) {
          if (res.data.errno != 0) {
            this.$message.error(res.data.errmsg)
          }
        } else {
          this.ISpayShow = true
          this.payOrderOk = res.data.order
        }
      })
    },
    cancelOrde () {
      this.$confirm('确认取消订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading02 = true
          api.CancelOrder({ orderSn: this.order.orderSn }).then(res => {
            this.loading02 = false
            if (res.data.errno) {
              if (res.data.errno != 0) {
                this.$message.error(res.data.errmsg)
              }
            } else {
              this.$message({
                type: 'success',
                message: '取消成功!'
              })
              this.$router.replace({ path: './my', query: { id: 2 } })
            }
          })
        })
        .catch(() => {
          this.loading02 = false
        })
    },
    goBlack () {
      this.$router.go(-1)
    },
    close () {
      this.littleShow = false
    },
    goHome () {
      const query = JSON.parse(localStorage.getItem('route_query'))
      this.$router.replace({ path: './detail', query: query })
    },
    goMy () {
      this.$router.replace({ path: './my', query: { id: 2 } })
    }
  },
  destroyed () {
    localStorage.removeItem('currency')
    localStorage.removeItem('isAnony')
  }
}
</script>

<style lang="less" scoped>
.isPayStatus-fd {
}
.littleShowbut {
  margin-top: 20px;
  display: flex;
  overflow: hidden;
  justify-content: space-around;
  div {
    width: 170px;
    height: 44px;
    font-size: 16px;
    border: 1px solid #d82241;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
  }
  .but1 {
    background: #da2740;
    color: #ffffff;
    a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
  .but2 {
    background: #fff9f8;
    color: #d82241;
  }
}

.particulars {
  margin: 30px 0px;
  padding: 15px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.particulars-item {
  display: flex;
  line-height: 30px;
  b {
    color: #444444;
    font-size: 14px;
    flex: 1;
  }
  span {
    color: #888888;
    font-size: 16px;
    flex: 3;
  }
}
.area_box {
}
.content {
  min-width: 66%;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 30px;
  padding: 30px 0px;
  margin-bottom: 32vh;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.cat-bd-con {
  margin-bottom: 30px;
}

.pay-l {
  font-size: 20px;

  font-weight: 600;
  color: #444444;
  height: 40px;
  line-height: 40px;
  padding-left: 60px;
  background: url("../../assets/static/t-08.png") no-repeat;
  background-size: 40px 40px;
}
.pay-r {
  font-size: 14px;

  font-weight: 600;
  color: #444444;
}
.pay-r span {
  font-size: 24px;

  font-weight: 600;
  color: #da2740;
}
.con-t-span {
  font-size: 18px;

  font-weight: 600;
  color: #444444;
}

.goBuy {
  height: 50px;

  width: 180px;

  background: #da2740;
  color: #ffffff;
  font-size: 18px;

  font-weight: 400;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
  white-space: nowrap;
}
.out {
  width: 320px;
  height: 320px;
  background: #f5f7fa url("../../assets/static/t-09.png") no-repeat center
    center;
  line-height: 580px;
  color: #bbb;
  text-align: center;
  font-size: 28px;
}
.qrCodeUrl {
  text-align: center;
  width: 320px;
  height: 320px;
  margin: auto;
  position: relative;
}
.subfield {
  margin-bottom: 20px;
}
</style>
